<template>
	<view class="listBox" v-if="list">
		<view class="header">
			<!-- 固定头部 -->
			<view class="fixed">
				<view class="fixedBox">
					<view :class="reportShow == 2 ? 'now' : ''" @click="clickReport(2)">现状评估</view>
					<view :class="reportShow == 3 ? 'risk' : ''" @click="clickReport(3)">风险评估</view> 
					<view :class="reportShow == 1 ? 'summary' : ''" @click="clickReport(1)">评估汇总</view>
				</view>
			</view>
		</view>
		<view class="mainContent" v-if="list.length > 0">
			<uni-swipe-action>
				<view>
					<uni-swipe-action-item  v-for="(item,index) in list" :key="index">
						<view class="item" >
							<div class="item-l">
								<image mode="aspectFill" src="../../../static/img/headFeature/member/archivedOne.png"></image>
								<text>{{item.healthName}}</text>
							</div>
							<div class="item-c" @click="toView(item)" v-if="reportShow == 2">
								<p>中医体质评估</p>
								<p>评估编号：{{!item.status || item.status == 1?'待评估':item.sn}}</p>
								<p>辨识结果：{{!item.status || item.status == 1?'待评估':item.string}}</p>
							</div>
							<div v-if="reportShow == 2" :class="['item-r',!item.status || item.status == 2?'not-archived':item.status == 1 ? 'normal' : '', item.type == 2 ? 'archived' : '' ]">
								{{!item.status || item.status == 1?'已保存': item.type == 2 ? '已评估' : '待评估'}}
								<span v-if="item.url" class="readReport" @click="read1(item)">查看报告</span>
							</div>
							<!-- <div  v-if="reportShow == 2" :class="['item-r',!item.status || item.status == 2?'not-archived':item.status == 1 ? 'normal' : '', item.type == 2 ? 'archived' : '' ]">{{!item.status || item.status == 1?'已保存': item.type == 2 ? '已评估' : '待评估'}}</div> -->
							
							<div class="item-c" @click="RisksToView(item)" v-if="reportShow == 1">
								<p>健康风险评估汇总</p>
								<p>评估编号：{{item.sn}}</p>
								<p>评估时间：{{!item.status || item.status == 1?'待评估':item.modifiedDate}}</p>
							</div>
							<div  v-if="reportShow == 1" :class="['item-r',!item.status || item.status == 2 ? 'archived' : '']">{{!item.status || item.status == 2?'已存档': '未存档'}}</div>
							
							<div class="item-c" v-if="reportShow == 3">
								<p>疾病风险评估</p>
								<p>评估编号：{{item.questionNumber}}</p>
								<p>评估时间：{{!item.status || item.status == 1?'待评估':item.updateTime}}</p>
							</div>
							<div  v-if="reportShow == 3" :class="['item-r',!item.status || item.status == 2 ? 'archived' : '']">
								{{!item.status || item.status == 2?'已存档': '未存档'}}
								<span v-if="item.status == 2" class="readReport" @click="read(item)">查看报告</span>
							</div>
						</view>
					</uni-swipe-action-item>
				</view>
			</uni-swipe-action>
		</view>
		<view class="noneChating" v-if="list.length <= 0">
			<image src="../../../static/img/headFeature/chattingNone.png"></image>
			<view>暂无数据</view>
		</view>
	</view>
</template>

<script>
	import {filterData2,getUrlParam} from '@/static/js/filter.js';
	export default {
		data () {
			return {
				pageIndex: 1,
				pageSize: 20,
				list: null,
				Risks: [],
				reportShow: 2,
			}
		},
		onLoad(){
			this.getlist(2)
		},
		methods:{
			filterData2,
			clickReport(e) {
				this.list = [];
				this.reportShow = e;
				this.getlist(e)
			},
			// 获取中医体质列表
			
			getlist(e){
				const userId = getUrlParam('userId');
				this.$api.userRisksList({pageIndex:this.pageIndex,pageSize:this.pageSize,type:e,userId:userId}).then((res) => {
					if(res.data.returnCode == '200') {
						var data = []
						if(res.data.result){
							if(res.data.result.appConstitutionEntityPage){
								data = res.data.result.appConstitutionEntityPage.elements
							}else if(res.data.result.appPutInAssessEntityPage){
								data = res.data.result.appPutInAssessEntityPage.list
							}else{
								data = res.data.result.appHealthRisksEntityPage.elements
							}
						}
						
						this.list = data.map((a) => {
							if(a.constitution){
								const constitution = JSON.parse(a.constitution)
								if(!constitution[0] && !constitution[1] && !constitution[2] && !constitution[3]){
									a.string = ''
								}else if(!constitution[3] && constitution[0]) {
									a.string = '为'+constitution[0]+'体质'
								}else{
									a.string = '为'+constitution[0]+(constitution[0] == '偏颇体质'?',':'体质,') +(constitution[1] ? '以'+constitution[1]+'为主,' : '' ) + ( constitution[2] ? '兼'+constitution[2]+'体质,' : '') + '有'+constitution[3]+'倾向'
								}
							}
							return a
						})
						// this.Risks = res.data.result && res.data.result.appHealthRisksEntityPage
						// this.summary =  res.data.result && res.data.result.appHealthRisksEntityPage
					}
				
				})
			},
			toView(e) {
				uni.navigateTo({
					url:'/pages/quickly/tcm/physical2?editId='+e.id+'&userStatus=1'+'&sex='+getUrlParam('sex')+'&userId='+getUrlParam('userId')
				})
			},
			RisksToView(e) {
				uni.navigateTo({
					url:'/pages/headFeatures/userSummary/toView?id='+e.id+'&userId='+e.userId
				})
			},

			read(item){
				window.location.href = 'http://health.jlm12580.com/web/viewer.html?file='+item.reportUrl
			},
			read1(item) {
				window.location.href = 'http://health.jlm12580.com/web/viewer.html?file='+item.url
			}
		}
	}
</script>

<style lang="scss" scoped>
	.listBox {
		background-color: #F8F8F8;
		width: 750upx;
		min-height: calc(100vh - 44px);
		.header {
			width: 750upx;
			height: 242upx;
			background: url(@/static/img/headFeature/interventionPlanBj.png) no-repeat;
			background-size: 100% 100%;
			
			.fixed {
				position: fixed;
				left: 0;
				top: 44px;
				background-color: #38CB97;
				width: 750upx;
				display: flex;
				align-items: center;
				background-color: #38CB97;
				margin: 0 atuo;
				height: 154upx;
				z-index: 10;
				.fixedBox {
					display: flex;
					width: 618upx;
					height: 64upx;
					border-radius: 32upx;
					background-color: #FFFFFF;
					margin: 0 auto;				
					view {
						flex: 1;
						color: #333333;
						font-size: 32upx;
						text-align: center;
						height: 100%;
						line-height: 64upx;
					}
					.now,
					.record {
						color: #000000;
						background-color: #FFFFFF;
						border-radius: 32upx 0px 0px 32upx;
					}
					.now,
					.summary{
						background-color: #82DCB0;
						border-radius: 32upx 0px 0px 32upx;
						color: #FFFFFF;
						font-size: 32upx;
					}
					.risk {
						color: #FFFFFF;
						font-size: 32upx;
						background-color: #82DCB0;
					}
					.summary {
						border-radius: 0 32upx 32upx 0px;
					}
				}
			}
		}
		.mainContent {
			margin: -92upx 24upx 0;
			width: 702upx;
		}
		.item{
			display: flex;
			padding: 42upx 21upx;
			background: #fff;
			margin-bottom: 24upx;
			width: 100%;	
			border-radius: 12px;
			&-l{
				position: relative;
				image{
					width: 92upx;
					height: 106upx;
					margin-right: 18upx;
					margin-top: 10upx;
				}
				text {
					width: 92upx;
					position: absolute;
					bottom: 20upx;
					color: #FFFFFF;
					font-size: 24upx;
					left: 0;
					overflow: hidden;    
					text-overflow:ellipsis;    
					white-space: nowrap;
					display: block;
					text-align: center;
				}
			}
			&-c{
				flex:1;
				font-size: 28upx;
				line-height: 1.5;
				p:nth-child(1){
					font-weight: bold;
					font-size: 30upx;
				}
				p {
					max-width: 200px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
			&-r{
				text-align: center;
				font-size: 26upx;
				&.not-archived{
					color: #1A85E9;
				}
				&.archived{
					color: #38CB97;
				}
				&.normal {
					color: #FF9600;
				}
			}
			.reportLook {
				width: 126upx;
				height: 46upx;
				background: #38CB97;
				border-radius: 6upx;
				color: #FFFFFF;
				font-size: 28upx;
				text-align: center;
				line-height: 46upx;
				margin: 40upx 0;
			}
		}
	}
	.readReport{
		display: inline-block;
		width: 126upx;
		height: 46upx;
		background: #38CB97;
		border-radius:6upx;
		color: #fff;
		text-align: center;
		line-height: 46upx;
		font-weight: normal;
		margin-top: 40upx;
	}
	.noneChating {
		padding-top: 228upx;
		image {
			display: block;
			margin: 0 auto;
			width: 260upx;
			height: 154upx;
		}
		view {
			margin: 24px auto;
			text-align: center;
			color: #333333;
			font-size: 13px;
		}
	}
</style>
